<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <nav class="navbar container navbar-expand-lg navbar-light nav-color"> <a class="navbar-brand" href="#"> Logo <span> Here </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Faq</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </header> <div class="banner" style="background-image:url(https://i.ibb.co/3F2yxPy/Untitled-2.png);"> <div class="banner-innner"> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="banner-left"> <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p> <a href="#"> Contact </a> </div> </div> <div class="col-md-5"> <div class="banner-right"> <form action="" method=""> <div class="form-group"> <input type="text" class="form-control" for="name" name="name" value="" placeholder="Your name"> </div> <div class="form-group"> <input type="email" class="form-control" for="email" name="email" value="" placeholder="Your email"> </div> <div class="form-group"> <input type="text" class="form-control" for="number" name="number" value="" placeholder="Your number"> </div> <div class="form-group"> <textarea cols="40" rows="4" class="form-control" placeholder="Your message"></textarea> </div> <button class="btn custom-btn">SUBMIT NOW </button> </form> </div> </div> </div> </div> </div> </div>

.banner { background-attachment: fixed; background-position: 0; background-size: cover; height:100vh; position:relative; padding:180px 0; } header{ position:absolute; width:100%; top:0; z-index:11; } .banner-left h1 { color: #fff; text-transform: uppercase; font-size: 42px; font-weight: 800; line-height: 50px; text-shadow: 1px 2px #000; margin-bottom:15px; } .banner-left p { color: #fff; letter-spacing: 0.5px; line-height: 28px; margin-bottom:30px; } .banner-right { padding: 30px; background: #ffffff69; border-radius: 15px; box-shadow: 1px 1px 18px 1px #0000007a; } .custom-btn { width: 100%; background: #E91E63; color: #fff; letter-spacing: 2.5px; transition:0.8 ease; } .banner-left a { background: #e91e63; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 2.5px; padding: 8px 35px; border-radius: 4px; transition:0.8 ease; } .banner-left a:hover{ letter-spacing:3px; transition:0.8 ease; } .custom-btn:hover{ letter-spacing:3px; transition:0.8 ease; } .navbar-light .navbar-brand { color: rgba(255, 255, 255, 0.9); font-weight: 700; font-size: 30px; text-transform: uppercase; text-shadow: 1px 2px #000; } .navbar-light .navbar-nav .nav-link { color: #fff; font-weight: 500; font-size: 18px; padding-left: 1.5rem; padding-right: 1.5rem; } .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: #fff; } .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link:hover { color: #e91e63; } .navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: #fff; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: #e91e63; } .dropdown-menu { padding: 0px; } span.navbar-toggler-icon { background-image: url(https://i.ibb.co/1v9M0dZ/menu.png) !important; width: 25px; height: 25px; cursor:pointer; } button.navbar-toggler:focus { outline: none; } a.dropdown-item { padding: 10px; background: #515156; color: #fff; } /* Mobile css media query */ @media only screen and (max-width: 800px ){ .banner-left h1 { color: #fff; text-transform: uppercase; font-size: 30px; font-weight: 800; line-height: 35px; text-shadow: 1px 2px #000; } .banner{ padding:120px 0; height: auto; } .banner-right { margin-top: 30px; } .nav-color{ background:#000; } .navbar-light .navbar-nav .nav-link{ padding-left:0; } }